
import { useNavigate } from 'react-router-dom';
import React from 'react';
import { Toast } from 'antd-mobile'
import './loginegister.css'
function Loginegister() {
    let navigate = useNavigate();
    let [flags, editFlag] = React.useState(true)
    let [passwords, editPass] = React.useState('')
    let [passwordss, editPasss] = React.useState('')
    let [phones, editphone] = React.useState('')
    // 勾选服务协议
    const ready = () => {
        editFlag(!flags)
    }

    // 输入框内容
    const inputChnage = (e) => {
        e.persist()
        let name = e.target.name
        console.log(e.target.name);
        if (name == 'phone') {
            console.log('触发');
            editphone(e.target.value)
        } else if (name == 'password') {
            editPass(e.target.value)
        } else if (name == 'passwords') {
            editPasss(e.target.value)
        }

    }
    const submit = () => {
        let reg =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        let pass = /^[a-zA-Z0-9]\w{7,17}$/;
        if (!reg.test(phones)) {
            //不正确处理
            Toast.show("请输入正确手机号码");
            return;
        }
        if (!pass.test(passwords)) {
            Toast.show("密码格式不正确");
            return;
        }
        if (passwords != passwordss) {
            Toast.show("两次输入的密码不同");
            return;
        }
        if (!flags) {
            window.localStorage.setItem("userId", phones);
            window.localStorage.setItem("pass", passwords);

            Toast.show("注册成功,前往登录页面");
            navigate("/loginpass");
        } else {
            Toast.show("请同意用户协议");
        }
    }

    // 表单提交
    // function onsubmit(value){
    //     console.log(value);

    //     //1. 正则验证数据是否正确
    //     //2. 请求数据接口
    //     //3. 存状态
    //     let {username,password,password2} = value;

    //     if( password == password2){
    //         console.log("注册成功");
    //         window.localStorage.setItem("register",JSON.stringify({username,password}));
    //         navigate("/login")

    //     }else{
    //         console.log("注册失败");
    //     }


    // }


    return (
        <div className='loginregister'>
            <div className="login">
                <div className="head">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                    <div className="islogin">注册</div>
                </div>
                <div className="fx login-int">
                    <div style={{ marginRight: '10px' }}>+86</div>
                    <div className="width-100" style={{ position: 'relative' }}>
                        <input
                            type="text"
                            placeholder="输入手机号"
                            className="width-100"
                            name='phone'
                            value={phones}
                            onChange={inputChnage}
                        />
                    </div>
                </div>
                <div className="fx login-int" style={{ marginTop: '20px' }}>
                    <div className="width-100" style={{ position: 'relative' }}>
                        <input
                            type="password"
                            placeholder="请输入密码"
                            className="width-100"
                            name='password'
                            value={passwords}
                            onChange={inputChnage}
                        />
                    </div>
                    <div className="fx align-items" >
                        <i className="icon-hide iconfont" v-show="!eye"></i>
                        <i className="icon-browse iconfont" v-show="eye"></i>
                    </div>
                </div>
                <div className="fx login-int" style={{ marginTop: '20px' }}>
                    <div className="width-100" style={{ position: 'relative' }}>
                        <input
                            type="password"
                            placeholder="请再次输入密码"
                            className="width-100"
                            name='passwords'
                            value={passwordss}
                            onChange={inputChnage}
                        />
                    </div>
                    <div className="fx align-items" >
                        <i className="icon-hide iconfont" v-show="!eye"></i>
                        <i className="icon-browse iconfont" v-show="eye"></i>
                    </div>
                </div>
                <div className="user-agreement">

                    <div className="phone-login" onClick={submit} >立即注册</div>
                    <div className="agree">
                        <div className="img" onClick={ready}>
                            {
                                flags ? (<img src="../assets/img/weiv.png" className="isImg" />) : (<img src="../assets/img/yiv.png" className="isImg" />)
                            }



                        </div>
                        <div style={{ display: 'flex', position: 'relative' }}>
                            <p>已阅读并同意</p>
                            <p className="c-ff">《用户协议》</p>
                            <p>和</p>
                            <p className="c-ff">《隐私政策》</p>
                        </div>
                    </div>
                </div >
            </div >
        </div>
    )

}

export default Loginegister;